<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侦听-响应值</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="应用"></div>
</body>
<script>
    const {createApp: 创建, ref: 响应值, watch: 侦听} = Vue 

    const 根组件 = {
        template: `
            <input type="text" v-model="用户.姓氏" placeholder="姓"/>
            <input type="text" v-model="用户.名字" placeholder="名"/>
            <button @click="取消侦听">取消侦听</button>
            <div>{{姓名}}</div>
        `,
        setup() {
            const 用户 = 响应值({
                姓氏: '张',
                名字: '三',
            })
            // let 姓名 = ''
            const 姓名 = 响应值('')

            取消侦听 = 侦听(用户, (新用户) => {
                姓名.value = `${新用户.姓氏} ${新用户.名字}`
            }, {deep: true, immediate: true})
            return {用户, 姓名, 取消侦听}
        }
    }

    应用 = 创建(根组件)
    应用.mount('#应用')
</script>
</html>